<template>
  <div class="container" :style="{ padding: padding }">
    <!--  作答详情  -->
    <div
      v-if="formatObj.finishTime||mark=='examDetail_mark'"
      class="exam_content"
      :style="{ height: outHeight }"
      v-loading="loading"
    >
      <!--   题目列表   -->
      <div class="answer_sheet" v-if="showSheet">
        <div class="answer_sheet_title">
          <span>题目列表</span>
          <i
            @click="showSheet = false"
            class="el-icon-s-operation color_aqua"
          ></i>
        </div>
        <div class="sheet_question_list">
          <div
            v-for="(item, index) in formatObj.examPaperTitleList"
            :key="index"
          >
            <a @click="scrollToAnchor(item, 1)" class="sheet_question_item"
            >{{ item.title }}
              <span class="paperTitle ml10">共{{ item.topicNum }}题</span>
            </a>
            <!--     已提交       -->
            <div
              class="sheet_answer_collect"
              v-if="formatObj.passing == 3 || formatObj.passing == 0"
            >
              <div
                v-for="(childItem, childIndex) in item.topicList"
                :key="childIndex"
              >
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-if="childItem.topicType == 1"
                  :class="{ selected: childItem.multiAnswers.length > 0 }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-else-if="childItem.topicType == 3"
                  :class="{
                    selected:
                      childItem.multiAnswers &&
                      childItem.multiAnswers.length == childItem.optionCount &&
                      !childItem.multiAnswers.includes(''),
                  }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-else-if="[4, 5].includes(childItem.topicType)"
                  :class="{
                    selected:
                      childItem.userAnswer || childItem.echoFile.length > 0,
                  }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-else
                  :class="{ selected: childItem.userAnswer }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
              </div>
            </div>
            <!--     答题详情       -->
            <div
              class="sheet_answer_collect"
              v-if="formatObj.passing != 3 && formatObj.passing != 0"
            >
              <div
                v-for="(childItem, childIndex) in item.topicList"
                :key="childIndex"
              >
                <!--   答错题    -->
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-if="!childItem.right"
                  class="sheet_answer_collect_item fail_select"
                >
                  {{ childItem.sort }}
                </div>
                <!--   答对题    -->
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-if="childItem.right"
                  class="sheet_answer_collect_item selected"
                >
                  {{ childItem.sort }}
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!--  试卷状态 已提交    -->
      <div
        class="submited_state_top bg_color_green"
        v-if="formatObj.passing == 3 && $route.query.sign != 'tea' && showStatus"
      >
        <img
          class="submited_img"
          src="@/assets/images/submited_img.png"
          alt="加载失败"
        />
        <!-- <div v-if="!formatObj.groupId" class="submited_text state_color_green">
          已提交考核！等待老师评分~
        </div> -->
        <!-- 查看考核结果 -->
        <template>
          <div class="submited_text state_color_green">
            已提交{{ titleName }}！等待

            <span
              v-if="
                formatObj.teacherScorePercent != '0' &&
                !formatObj.teacherScore &&
                formatObj.teacherScore != '0'
              "
            >
              老师</span
            >
            <span
              v-if="
                formatObj.leaderScorePercent != '0' &&
                !formatObj.leaderScore &&
                formatObj.leaderScore != '0'
              "
            >
              组长</span
            >
            <span
              v-if="
                formatObj.selfScorePercent != '0' &&
                !formatObj.selfScore &&
                formatObj.selfScore != '0'
              "
            >
              自己</span
            >
            <span
              v-if="
                formatObj.otherGroupScorePercent != '0' &&
                !formatObj.otherGroupScore &&
                formatObj.otherGroupScore != '0'
              "
            >
              其他小组</span
            >
            评分~
          </div>
        </template>
      </div>
      <!--  试卷状态 未通过    -->
      <div
        class="submited_state_top bg_color_red"
        v-if="
          formatObj.passing == -1 && $route.query.sign != 'tea' && showStatus
        "
      >
        <img
          class="submited_img"
          src="@/assets/images/not_passed_img.png"
          alt="加载失败"
        />
        <div class="submited_text state_color_red">
          很遗憾你未能通过本次考核！你的分数为{{
            formatObj.score
              ? ((formatObj.score / 100) * formatObj.totalScore).toFixed(2)
              : '0'
          }}（折算为百分制[{{ formatObj.score ? formatObj.score : '0' }}]）分
        </div>
      </div>
      <!--  试卷状态 未通过    -->
      <div
        class="submited_state_top bg_color_light_green"
        v-if="
          formatObj.passing == 1 && $route.query.sign != 'tea' && showStatus
        "
      >
        <img class="submited_img" src="@/assets/images/passed_img.png" alt="加载失败"/>
        <div class="submited_text state_color_light_green">
          恭喜你通过了{{
            $route.query.examType == 6 ? '作业' : '考试'
          }}！你的分数为{{
            ((formatObj.score / 100) * formatObj.totalScore).toFixed(2)
          }}（折算为百分制[{{ formatObj.score }}]）分
        </div>
      </div>
      <!--   main-top内容  答题   -->
      <div class="exam_content_top">
        <div class="title flex">
          {{ titleName }}
          <div
            style="
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              margin: 3px 0 0 20px;
            "
          >
            总分:{{ formatObj.totalScore ? formatObj.totalScore : 0 }}分
            <span
              style="margin: 0 5px"
              v-if="
                titleName == '考核' ||
                titleName == '考核详情' ||
                titleName == '考核批改'
              "
            >|</span
            >
            <span
              v-if="
                titleName == '考核' ||
                titleName == '考核详情' ||
                titleName == '考核批改'
              "
            >
              及格分数:{{
                formatObj.passingGrade ? formatObj.passingGrade : 0
              }}分
            </span>
          </div>
        </div>
        <i @click="showSheet = true" class="el-icon-s-operation"></i>
      </div>
      <slot></slot>
      <div class="all_exam_connect" :style="{ height: inHeight }">
        <!--   main-connect内容   -->
        <div
          class="exam_list"
          v-for="(item, index) in formatObj.examPaperTitleList"
          :key="index"
        >
          <div :id="item.titleId" class="paperTitle_left">
            {{ item.title }}
            <span class="paperTitle"
            >(共{{ item.topicNum }}题，{{ item.score }}分)</span
            >
          </div>
          <div
            class="answer_question"
            v-for="(childItem, childIndex) in item.topicList"
            :key="childIndex"
          >
            <div style="display: flex;flex-wrap: wrap">
              <span :id="childItem.id" class="questionTitle" v-html="$renderedDescription(`${childItem.sort}.<span style='color: #ef7d00;'>${topicType[childItem.topicType]}</span> ${childItem.topicContent} (${ topicType[childItem.topicType] },${childItem.score}分)`)"></span>
            </div>
            <div class="item_answer">
              <!--    填空题部分        -->
              <div v-if="childItem.topicType == 3">
                <div
                  class="optionItem"
                  v-for="(optionIndex) in childItem.optionCount"
                  :key="optionIndex"
                >
                  <div class="optionItem_info" v-if="formatObj.finishTime"
                       v-html="$renderedDescription(`${optionIndex}.${childItem.multiAnswers[optionIndex - 1]?childItem.multiAnswers[optionIndex - 1]:''}`)"
                  ></div>
                </div>
              </div>
              <!--    单选题部分        -->
              <el-radio-group
                v-removeAriaHidden
                disabled
                @change="uploadAnswer(childItem.topicType, childItem)"
                v-if="childItem.topicType == 0"
                v-model="childItem.userAnswer"
              >
                <el-radio
                  v-for="(answerItem, answerIndex) in childItem.topicOptionList"
                  :key="answerIndex"
                  :label="answerItem.label"
                >
                  <div style="display: flex;flex-wrap: wrap">
                    <span>{{ answerItem.label }}、</span>
                    <span v-html="$renderedDescription(answerItem.optionValue)"></span>
                  </div>
                </el-radio>
              </el-radio-group>
              <!--    多选题部分        -->
              <el-checkbox-group
                disabled
                @change="uploadAnswer(childItem.topicType, childItem)"
                v-if="childItem.topicType == 1"
                v-model="childItem.multiAnswers"
              >
                <el-checkbox
                  v-for="(answerItem, answerIndex) in childItem.topicOptionList"
                  :key="answerIndex"
                  :label="answerItem.label"
                >
                  <div style="display: flex;flex-wrap: wrap">
                    <span>{{ answerItem.label }}、</span>
                    <span v-html="$renderedDescription(answerItem.optionValue)"></span>
                  </div>
                </el-checkbox>
              </el-checkbox-group>
              <!--    判断题部分        -->
              <el-radio-group
                v-removeAriaHidden
                disabled
                @change="uploadAnswer(childItem.topicType, childItem)"
                v-if="childItem.topicType == 2"
                v-model="childItem.userAnswer"
              >
                <el-radio :label="'正确'">对</el-radio>
                <el-radio :label="'错误'">错</el-radio>
              </el-radio-group>
              <!--      简答题部分      -->
              <div class="textarea_info" v-if="childItem.topicType == 4 || childItem.topicType == 5"
                   v-html="$renderedDescription(childItem.userAnswer)"
              ></div>
              <!--  附件    -->
              <div
                class="attachment"
                v-if="childItem.topicType == 4 || childItem.topicType == 5"
              >
                <div style="width: 50px">附件</div>
                <div class="pictures">
                  <!--     详情状态只可查看      -->
                  <div style="display: flex; flex-wrap: wrap">
                    <!--     有附图信息遍历展示        -->
                    <div
                      class="view_img"
                      v-for="(item, index) in childItem.echoFile"
                      :key="index"
                    >
                      <el-image
                        v-if="item.type == 1"
                        class="view_img_url"
                        :src="item.url"
                        :key="index"
                        :preview-src-list="[item.url]"
                      >
                      </el-image>
                      <div v-if="item.type == 2" class="video_box">
                        <img
                          class="video_img"
                          src="@/assets/images/video_img.png"
                          alt="加载失败"
                        />
                        <video-review
                          class="video_box"
                          ref="videoReview"
                          :videoSrc="item.url"
                        ></video-review>
                      </div>
                      <div
                        @click="lookFiles(item.url, item.name)"
                        v-if="item.type == 3 || item.type == 4"
                        class="other_box"
                      >
                        <i class="el-icon-document"></i>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="item.name"
                          placement="top"
                        >
                          <div class="other_text">
                            <span>{{ item.name }}</span>
                            {{
                              item.name.slice(
                                item.name.lastIndexOf('.'),
                                item.name.length
                              )
                            }}
                          </div>
                        </el-tooltip>
                      </div>
                    </div>
                    <!--     没有附图信息        -->
                    <div v-if="childItem.echoFile.length == 0">
                      暂无附件信息
                    </div>
                  </div>
                </div>
              </div>
              <!--     回答和正确答案       -->
              <div class="mt_10 flex">
                <!--       回答错误         -->
                <div v-if="!childItem.right">
                  <span
                    v-if="childItem.topicType == 0 || childItem.topicType == 1"
                    class="fail_answered"
                  >回答错误：{{ childItem.userAnswer }}</span
                  >
                  <span v-if="childItem.topicType == 2" class="fail_answered"
                  >回答错误：{{
                      childItem.userAnswer == '正确' ? '对' : '错'
                    }}</span
                  >
                  <span v-if="childItem.topicType == 3" class="fail_answered"
                        v-html="$renderedDescription(`回答错误：${childItem.multiAnswers.join('|')}`)"
                  ></span>
                  <span
                    v-if="
                      titleName == '练习' &&
                      childItem.topicType != 4 &&
                      childItem.topicType != 5
                    "
                    class="right_answered"
                  >正确答案：<span class="color_green">{{
                      childItem.trueAnswer
                    }}</span></span
                  >
                </div>
                <div
                  class="color_green"
                  v-if="
                    childItem.right &&
                    childItem.topicType != 4 &&
                    childItem.topicType != 5
                  "
                >
                  恭喜你！ 答对了！
                  <template v-if="titleName == '练习'">
                    <span class="color_black">正确答案：</span
                    >{{ childItem.trueAnswer }}
                  </template>
                </div>
                <div
                  v-if="childItem.topicType != 4 && childItem.topicType != 5"
                >
                  <span
                    class="right_answered"
                    v-if="childItem.scoreGot || childItem.scoreGot == 0"
                  >
                    系统评分：<span class="color_green">{{
                      childItem.scoreGot.toFixed(2)
                    }}</span>
                  </span>
                </div>
                <div
                  v-if="childItem.topicType == 4 || childItem.topicType == 5"
                >
                  <span
                    class="right_answered"
                    v-if="childItem.scoreGot || childItem.scoreGot == 0"
                  >
                    得分：<span class="color_green">{{
                      childItem.scoreGot.toFixed(2)
                    }}</span>
                  </span>
                </div>
              </div>
              <!--  图片批注    -->
              <div
                class="attachment"
                v-if="childItem.topicType == 4 || childItem.topicType == 5"
              >
                <div style="width: 60px">图片批注</div>
                <div class="pictures">
                  <!--     详情状态只可查看      -->
                  <div style="display: flex; flex-wrap: wrap">
                    <!--     有附图信息遍历展示        -->
                    <div
                      class="view_img"
                      v-for="(item, index) in childItem.settlePic"
                      :key="index"
                    >
                      <el-image
                        class="view_img_url"
                        :src="item"
                        :key="index"
                        :preview-src-list="childItem.settlePic"
                      >
                      </el-image>
                    </div>
                    <!--     没有图片批注       -->
                    <div v-if="childItem.settlePic.length == 0">
                      暂无图片批注
                    </div>
                  </div>
                </div>
              </div>
              <!--        教师批注        -->
              <div v-if="childItem.teacherRemark">
                <div class="teacherRemark">
                  <div class="label">教师批注：</div>
                  <div
                    style="white-space: pre-wrap; word-wrap: break-word"
                    class="color_gary"
                    v-html="childItem.teacherRemark"
                  ></div>
                </div>
              </div>
              <!--     试题解析 只有批改过的详情和老师批改能看      -->
              <div class="resolve_exam" v-if="formatObj.passing != 3 && childItem.resolve">
                <div class="resolve_exam_label">
                  试题解析：
                </div>
                <div style="width: calc(100% - 88px)">
                  <span style="
                      white-space: pre-wrap;
                      word-wrap: break-word;
                      width: 100%;
                    " v-html="$renderedDescription(childItem.resolve)" @click="showImg($event)"
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--    评价维度详情  -->
        <div
          class="others_content"
          v-if="
            formatObj.evaluateGradeEntityList &&
            formatObj.evaluateGradeEntityList.length > 0 &&
            (formatObj.passing == 1 || formatObj.passing == -1)
          "
        >
          <div class="title">能力素养评价</div>
          <div
            class="others_content_item"
            v-for="(item, index) in formatObj.evaluateGradeEntityList[0]
              .ccExamEvaluateCategoryEntityList"
            :key="index"
          >
            <div class="title">
              {{ item.categoryName }}
            </div>
            <div class="param_list">
              <div
                class="param_item"
                v-for="(
                  paramItem, paramIndex
                ) in item.ccExamEvaluateParamEntityList"
                :key="paramIndex"
              >
                <span :id="`param_${paramItem.paramId}`"
                >{{ paramItem.paramName }}:</span
                >{{ paramItem.score ? paramItem.score : '0' }}分
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="!formatObj.finishTime&&mark!='examDetail_mark'"
      class="answer_content"
      :style="{ height: outHeight }"
      v-loading="loading"
    >
      <!--   main-top内容  答题   -->
      <div class="answer_content_top">
        <div class="title flex">
          {{ titleName }}
          <div
            style="
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              margin: 3px 0 0 20px;
            "
          >
            总分:{{ formatObj.totalScore ? formatObj.totalScore : 0 }}分
            <span
              style="margin: 0 5px"
              v-if="
                titleName == '考核' ||
                titleName == '考核详情' ||
                titleName == '考核批改'
              "
            >|</span
            >
            <span
              v-if="
                titleName == '考核' ||
                titleName == '考核详情' ||
                titleName == '考核批改'
              "
            >
              及格分数:{{
                formatObj.passingGrade ? formatObj.passingGrade : 0
              }}分
            </span>
          </div>
        </div>
        <div class="middle">
          <span>{{ finishedNum }}/{{ examTotal }}</span>
          <div class="progress">
            <el-progress
              :show-text="false"
              color="#33bd99"
              define-back-color="#e5e5e5"
              :percentage="percentage"
            ></el-progress>
          </div>
          <div
            class="bg_orange"
            v-if="titleName != '作业' && titleName != '作业详情'"
          >
            <img
              class="countdown_img"
              src="@/assets/images/countdown_img.png"
              alt="加载失败"
            />
            <div v-if="showDJS" class="countdown_txt">
              {{ timeDiff }}
            </div>
          </div>
          <div v-else style="width: 100px; height: 28px"></div>
          <!--   题目列表   -->
          <div class="answer_sheet">
            <div class="answer_sheet_title">
              <span>题目列表</span>
            </div>
            <div class="sheet_question_list">
              <div
                v-for="(item, index) in formatObj.examPaperTitleList"
                :key="index"
              >
                <div style="margin-bottom: 12px">
                  {{
                    item.title
                  }}<span class="paperTitle ml10">共{{ item.topicNum }}题</span>
                </div>
                <!--     作答详情       -->
                <div class="sheet_answer_collect">
                  <div
                    v-for="(childItem, childIndex) in item.topicList"
                    :key="childIndex"
                  >
                    <div
                      @click="jumpToDetail(childItem)"
                      v-if="childItem.topicType == 1"
                      :class="{ selected: childItem.multiAnswers.length > 0 }"
                      class="sheet_answer_collect_item"
                    >
                      {{ childItem.sort }}
                    </div>
                    <div
                      @click="jumpToDetail(childItem)"
                      v-else-if="childItem.topicType == 3"
                      :class="{
                        selected:
                          childItem.multiAnswers &&
                          childItem.multiAnswers.length ==
                            childItem.optionCount &&
                          !childItem.multiAnswers.includes(''),
                      }"
                      class="sheet_answer_collect_item"
                    >
                      {{ childItem.sort }}
                    </div>
                    <div
                      @click="jumpToDetail(childItem)"
                      v-else-if="[4, 5].includes(childItem.topicType)"
                      :class="{
                        selected:
                          childItem.userAnswer || childItem.echoFile.length > 0,
                      }"
                      class="sheet_answer_collect_item"
                    >
                      {{ childItem.sort }}
                    </div>
                    <div
                      @click="jumpToDetail(childItem)"
                      v-else
                      :class="{ selected: childItem.userAnswer }"
                      class="sheet_answer_collect_item"
                    >
                      {{ childItem.sort }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-button
              type="primary"
              v-preventReClick
              @click="submitAnswer"
              class="operation_btn"
            >提交
            </el-button>
          </div>
        </div>
      </div>
      <div class="all_answer_connect" :style="{ height: inHeight }">
        <!--   main-connect内容   -->
        <div
          class="answer_list"
          v-for="(item, index) in answerExamData"
          :key="index"
        >
          <div :id="item.bigTitleId" class="paperTitle_left">
            {{ item.title }}
            <span class="paperTitle"
            >(共{{ item.topicNum }}题，{{ item.bigScore }}分)</span
            >
          </div>
          <div class="answer_question">
            <div style="display: flex; flex-wrap: wrap">
              <span :id="item.id" class="questionTitle" v-html="$renderedDescription(`${item.sort}.<span style='color: #ef7d00;'>${topicType[item.topicType]}</span> ${item.topicContent} (${ topicType[item.topicType] },${item.score}分)`)"></span>
            </div>
            <div v-if="item.topicPic" class="topic_image">
              <el-image
                v-for="(topicPicitem, topicPicindex) in item.topicPic.split(
                  ','
                )"
                style="
                  width: auto !important;
                  height: 100px;
                  margin-right: 10px;
                  margin-bottom: 10px;
                "
                :src="topicPicitem"
                :key="topicPicindex"
                :preview-src-list="item.topicPic.split(',')"
              >
              </el-image>
            </div>
            <div class="item_answer">
              <!--    填空题部分        -->
              <div v-if="item.topicType == 3">
                <div
                  class="optionItem"
                  v-for="(optionItem, optionIndex) in item.optionCount"
                  :key="optionIndex"
                >
                  <span class="optionItem_label">{{ optionIndex + 1 }}.</span>
                  <el-input
                    @blur="uploadAnswer(item.topicType, item)"
                    clearable
                    @change="trimAnswer(item.multiAnswers[optionIndex])"
                    class="optionItem_answer"
                    type="text"
                    :disabled="$isIncludesHtml(item.multiAnswers[optionIndex])"
                    placeholder="请输入答案"
                    v-model="item.multiAnswers[optionIndex]"
                  >
                  </el-input>
                  <span style="margin-left: 10px">
                    <el-button size="mini" type="primary" plain @click="initByFormula(1,item,optionIndex)"
                    >{{ $isIncludesHtml(item.multiAnswers[optionIndex]) ? '编辑' : '富文本录入' }}</el-button>
                  </span>
                </div>
              </div>
              <!--    单选题部分        -->
              <el-radio-group
                v-removeAriaHidden
                @change="uploadAnswer(item.topicType, item)"
                v-if="item.topicType == 0"
                v-model="item.userAnswer"
              >
                <el-radio
                  v-for="(answerItem, answerIndex) in item.topicOptionList"
                  :key="answerIndex"
                  :label="answerItem.label"
                >
                  <div style="display: flex;flex-wrap: wrap">
                    <span>{{ answerItem.label }}、</span>
                    <span v-html="$renderedDescription(answerItem.optionValue)"></span>
                  </div>
                </el-radio>
              </el-radio-group>
              <!--    多选题部分        -->
              <el-checkbox-group
                @change="uploadAnswer(item.topicType, item)"
                v-if="item.topicType == 1"
                v-model="item.multiAnswers"
              >
                <el-checkbox
                  v-for="(answerItem, answerIndex) in item.topicOptionList"
                  :key="answerIndex"
                  :label="answerItem.label"
                >
                  <div style="display: flex;flex-wrap: wrap">
                    <span>{{ answerItem.label }}、</span>
                    <span v-html="$renderedDescription(answerItem.optionValue)"></span>
                  </div>
                </el-checkbox>
              </el-checkbox-group>
              <!--    判断题部分        -->
              <el-radio-group
                v-removeAriaHidden
                @change="uploadAnswer(item.topicType, item)"
                v-if="item.topicType == 2"
                v-model="item.userAnswer"
              >
                <el-radio :label="'正确'">对</el-radio>
                <el-radio :label="'错误'">错</el-radio>
              </el-radio-group>
              <!--      简答题部分      -->
              <el-input
                @blur="uploadAnswer(item.topicType, item)"
                v-if="item.topicType == 4 || item.topicType == 5"
                class="textarea"
                type="textarea"
                :disabled="$isIncludesHtml(item.userAnswer)"
                :autosize="{ minRows: 3, maxRows: 4 }"
                placeholder="请输入答案"
                v-model="item.userAnswer"
              >
              </el-input>
              <el-button style="margin-left: 12px" v-if="item.topicType == 4 || item.topicType == 5" size="mini" type="primary" plain
                         @click="initByFormula(2,item)"
              >{{ $isIncludesHtml(item.userAnswer) ? '编辑' : '富文本录入' }}
              </el-button>
              <!--  附件    -->
              <div
                class="attachment"
                v-if="item.topicType == 4 || item.topicType == 5"
              >
                <div style="width: 50px">附件</div>
                <div class="pictures">
                  <!--     做题状态可点击上传        -->
                  <div class="add_class">
                    <div @click="showDialog(item)" class="upload_new">
                      <i class="el-icon-plus"></i>
                      <div class="upload_txt">上传文件</div>
                    </div>
                    <div
                      class="view_img_local"
                      v-for="(fileItem, fileIndex) in item.echoFile"
                      :key="fileIndex"
                    >
                      <el-image
                        v-if="fileItem.type == 1"
                        class="local_img_url"
                        :src="fileItem.url"
                        :preview-src-list="[fileItem.url]"
                      >
                      </el-image>
                      <div v-if="fileItem.type == 2" class="local_video_box">
                        <img
                          class="video_img"
                          src="@/assets/images/video_img.png"
                          alt="加载失败"
                        />
                        <video-review
                          class="video_box"
                          ref="videoReview"
                          :videoSrc="fileItem.url"
                        ></video-review>
                      </div>
                      <div
                        @click="lookFiles(fileItem.url, fileItem.name)"
                        v-if="fileItem.type == 3 || fileItem.type == 4"
                        class="local_other_box"
                      >
                        <i class="el-icon-document"></i>
                        <el-tooltip
                          class="fileItem"
                          effect="dark"
                          :content="fileItem.name"
                          placement="top"
                        >
                          <div class="other_text">
                            <span>{{ fileItem.name }}</span>
                            {{
                              fileItem.name.slice(
                                fileItem.name.lastIndexOf('.'),
                                fileItem.name.length
                              )
                            }}
                          </div>
                        </el-tooltip>
                      </div>
                      <img
                        @click="delImg(fileIndex, item.topicType, item)"
                        class="close_img"
                        src="@/assets/images/close_img.png"
                        alt="加载失败"
                      />
                    </div>
                  </div>
                  <!--    本地上传和拍照录像弹框      -->
                  <el-dialog
                    :close-on-click-modal="false"
                    :close-on-press-escape="false"
                    :visible.sync="item.showDialogState"
                    title="上传方式"
                    width="528px"
                    append-to-body
                  >
                    <div class="upload_way">
                      <uploadFile
                        :hasSlot="true"
                        :maxNum="10"
                        :echo-file="item.echoFile"
                        :max-image-size="20"
                        :max-video-size="300"
                        @uploadFiles="uploadFiles($event, item.topicType, item)"
                      >
                        <div class="upload_way_left">
                          <div class="local_icon"></div>
                          <div class="local_txt">本地文件</div>
                        </div>
                      </uploadFile>
                      <div
                        @click="getAuthorized(item.topicType, item)"
                        class="upload_way_right"
                      >
                        <div class="local_icon"></div>
                        <div class="local_txt">拍照上传</div>
                      </div>
                    </div>
                  </el-dialog>
                  <!--       拍照录像弹框           -->
                  <el-dialog
                    @close="closeVideoDialog(item)"
                    :close-on-click-modal="false"
                    :close-on-press-escape="false"
                    :visible.sync="item.showCameraDialog"
                    title="拍照或录像上传"
                    width="1050px"
                    append-to-body
                  >
                    <div class="photo_way">
                      <div class="photo_way_left camera_outer">
                        <div style="position: relative">
                          <video
                            id="videoCamera"
                            :width="videoWidth"
                            :height="videoHeight"
                            autoplay
                          ></video>
                          <canvas
                            id="canvasCamera"
                            style="display: none"
                            :width="videoWidth"
                            :height="videoHeight"
                          ></canvas>
                          <div
                            v-if="showrecordedTime"
                            style="
                              position: absolute;
                              bottom: 10px;
                              width: 100%;
                              display: flex;
                              justify-content: center;
                            "
                          >
                            <div
                              style="
                                width: 44px;
                                height: 20px;
                                background: #e95756;
                                border-radius: 2px;
                                color: #fff;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 12px;
                              "
                            >
                              {{ countdownElement }}
                            </div>
                          </div>
                        </div>
                        <div class="photo_btns">
                          <!--       拍照按钮           -->
                          <el-tooltip
                            v-show="!showVideoSwitch"
                            effect="dark"
                            content="拍照"
                            placement="top"
                          >
                            <div
                              @click="setImage(item)"
                              class="camera_photo_icon"
                            ></div>
                          </el-tooltip>
                          <!--       录像按钮           -->
                          <el-tooltip
                            v-show="!showVideoSwitch"
                            effect="dark"
                            content="录像"
                            placement="top"
                          >
                            <div
                              @click="showVideoSwitch = true"
                              class="camera_shooting_icon"
                            ></div>
                          </el-tooltip>
                          <!--       开始录制           -->
                          <el-tooltip
                            effect="dark"
                            v-show="showVideoSwitch && !actRecordVideo"
                            content="开始录制"
                            placement="top"
                          >
                            <div
                              @click="startRecording(item)"
                              class="video_recording_icon"
                            ></div>
                          </el-tooltip>
                          <!--       结束录制           -->
                          <el-tooltip
                            effect="dark"
                            v-show="showVideoSwitch && actRecordVideo"
                            content="结束录制"
                            placement="top"
                          >
                            <div
                              @click="stopRecording"
                              class="video_recording_hover_icon"
                            ></div>
                          </el-tooltip>
                        </div>
                      </div>
                      <div class="photo_way_right">
                        <div
                          class="view_img_local"
                          v-for="(fileItem, fileIndex) in recordedFilesUrls"
                          :key="fileIndex"
                        >
                          <el-image
                            v-if="fileItem.type == 1"
                            class="local_img_url"
                            :src="fileItem.url"
                            :preview-src-list="[fileItem.url]"
                          >
                          </el-image>
                          <div
                            v-if="fileItem.type == 2"
                            class="recorded_video_box"
                          >
                            <img
                              class="video_img"
                              src="@/assets/images/video_img.png"
                              alt="加载失败"
                            />
                            <video-review
                              class="video_box"
                              ref="videoReview"
                              :videoSrc="fileItem.url"
                            ></video-review>
                          </div>
                          <img
                            @click="delRecordedFile(fileIndex)"
                            class="close_img"
                            src="@/assets/images/close_img.png"
                            alt="加载失败"
                          />
                        </div>
                      </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="canel(item)">取 消</el-button>
                      <el-button type="primary" @click="submitFiles(item)"
                      >提 交</el-button
                      >
                    </span>
                  </el-dialog>
                  <div class="attachment_sugest">
                    照片和文件大小不可超过20MB，视频大小不可超过300M
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--  提交按钮    -->
      <div class="btns_operation">
        <el-button
          v-if="topicIndex > 0"
          @click="preQuestion"
          class="operation_btn"
          type="primary"
          plain
        >上一题
        </el-button>
        <el-button
          v-if="topicIndex < this.tidyData.length - 1"
          @click="nextQuestion"
          class="operation_btn"
          type="primary"
          plain
        >下一题
        </el-button>
      </div>
    </div>
    <fileDrawer
      :show.sync="drawer"
      :url="drawerurl"
      :name="drawername"
      :type="drawertype"
    ></fileDrawer>
    <div class="imgDolg" v-show="imgPreview.show">
      <i
        class="el-icon-close"
        id="imgDolgClose"
        @click.stop="imgPreview.show = false"
      ></i>
      <el-image
        ref="imgDolg"
        class="img"
        :src="imgPreview.img"
        fit="cover"
      ></el-image>
    </div>
    <!--  富文本公式编辑弹窗  -->
    <editDrawer :show.sync="showDrawer" :propEditorValue="propEditorValue"
                @sureConfirm="sureConfirm"
    ></editDrawer>
  </div>
</template>

<script>
import uploadFile from '@/components/uploadFile/index'
import videoReview from '@/components/videoReview/videoReview'
import fileDrawer from '@/components/fileDrawer.vue'
import { base64ToFile } from '@/utils/base64ToFile'
import { uploadOSS } from '@/api/upload'
import { returnName, returnType } from '@/utils/util'
import editDrawer from '@/views/tea_course/components/editDrawer'

export default {
  name: 'examinationAnswer',
  components: {
    uploadFile,
    videoReview,
    editDrawer,
    fileDrawer
  },
  props: {
    scoreDetailFlag: {
      type: [Boolean],
      default: true
    },
    showStatus: {
      type: [Boolean],
      default: true
    },
    examInfo: {
      type: [Object],
      default: ()=>{
        return {}
      },
    },
    titleName: {
      type: [String],
      default: ''
    },
    loading: {
      type: [Boolean],
      default: true
    },
    //倒计时时间
    endTime: {
      type: [String],
      default: ''
    },
    //是否为开始考试
    isAction: {
      type: [Boolean],
      default: false
    },
    padding: {
      type: [String],
      default: '24px 0'
    },
    outHeight: {
      type: [String],
      default: 'calc(100vh - 134px )'
    },
    inHeight: {
      type: [String],
      default: 'calc(100vh - 294px )'
    },
    mark: {
      type: String,
      default: ''
    }
  },
  watch: {
    examInfo: {
      handler() {
        this.formatDataInfo()
      },
      deep: true
    },
    answerExamData: {
      handler(val) {
        this.calculation(val)
      },
      deep: true
    },
    endTime: {
      handler(val) {
        if (val) {
          if (this.titleName != '作业') {
            let endtime = val - 0
            this.updateTimeDiff(endtime)
            const diffInSeconds = (new Date(endtime) - new Date()) / 1000
            if (diffInSeconds > 0) {
              this.timerDiff = setInterval(() => {
                this.updateTimeDiff(endtime)
              }, 1000)
            }
            this.showDJS = true
          }
        }
      },
      immediate: true
    }
  },
  filters: {},
  data() {
    return {
      openType: 1,
      //附件预览
      drawer: false,
      drawerurl: '',
      drawername: '',
      drawertype: '',
      //富文本公式编辑弹窗
      showDrawer: false,
      propEditorValue: '',
      currentTopicId: '',
      currentOptionIndex: '',

      videoWidth: 640,
      videoHeight: 360,
      thisCancas: null,
      thisContext: null,
      thisVideo: null,
      mediaRecorder: null,
      recordedChunks: [],
      //录像按钮
      showVideoSwitch: false,
      actRecordVideo: false,
      //抓拍图片（base64格式文件）和视频文件暂存区
      recordedFilesUrls: [],
      //录制视频倒计时是否展示
      showrecordedTime: false,
      countdownInterval: null,
      //录制视频倒计时时间
      countdownElement: '00:30',

      showDJS: false,
      formatObj: {},
      percentage: 0,
      showSheet: false,
      answer: [],
      form: {
        branchPic: null
      },
      vuecutshow: false,
      topicType: {
        0: '单选题 ',
        1: '多选题 ',
        2: '判断题',
        3: '填空题',
        4: '简答题',
        5: '操作题'
      },
      examTotal: 0,
      num: 0,
      finishedNum: 0,
      timerDiff: null,
      timeDiff: '',

      topicIndex: 0,
      answerExamData: [],
      tidyData: [],
      // 图片放大
      imgPreview: {
        img: '',
        show: false
      }
    }
  },
  created() {
  },
  beforeDestroy() {
    clearInterval(this.timerDiff)
    if (this.thisVideo) {
      this.stopNavigator()
    }
  },
  methods: {
    initByFormula(type, item, optionIndex) {
      this.openType = type
      if (type == 1) {
        this.showDrawer = true
        this.currentTopicId = item.id
        this.currentOptionIndex = optionIndex
        this.propEditorValue = item.multiAnswers[optionIndex]
      } else {
        this.showDrawer = true
        this.currentTopicId = item.id
        this.propEditorValue = item.userAnswer
      }
    },
    sureConfirm(e) {
      if (this.openType == 1) {
        this.answerExamData.forEach((item) => {
          if (item.id == this.currentTopicId && item.optionCount) {
            item.multiAnswers[this.currentOptionIndex] = e
            this.uploadAnswer(item.topicType, item)
          }
        })
      } else {
        this.answerExamData.forEach((item) => {
          if (item.id == this.currentTopicId) {
            item.userAnswer = e
            this.uploadAnswer(item.topicType, item)
          }
        })
      }
      this.calculation(this.answerExamData)
    },
    closeVideoDialog(childItem) {
      childItem.showCameraDialog = false
      this.showVideoSwitch = false
      this.actRecordVideo = false
      this.recordedFilesUrls = []
      this.showrecordedTime = false
      this.countdownElement = '00:30'
      if (this.countdownInterval) {
        clearInterval(this.countdownInterval)
      }
      this.stopNavigator()
    },
    canel(childItem) {
      childItem.showCameraDialog = false
      this.showVideoSwitch = false
      this.actRecordVideo = false
      this.recordedFilesUrls = []
      this.stopNavigator()
    },
    async submitFiles(childItem) {
      console.log('recordedFilesUrls上传文件', recordedFilesUrls)
      this.showVideoSwitch = false
      this.actRecordVideo = false
      for (const recordedFilesUrl of this.recordedFilesUrls) {
        if (recordedFilesUrl.type == 1) {
          const base64Data = recordedFilesUrl.url.match(
            /data:image\/[^;]+;base64,([^">]+)/
          )[1]
          let file = base64ToFile(base64Data, 'camera.png', 'image/png')
          let res = await uploadOSS(file)
          let obj = {
            ...recordedFilesUrl,
            url: res[0]
          }
          childItem.echoFile.push(obj)
        }
        if (recordedFilesUrl.type == 2) {
          const file = new File([recordedFilesUrl.blob], 'recorded-video.mp4', {
            type: 'video/mp4'
          })
          let res = await uploadOSS(file)
          let obj = {
            ...recordedFilesUrl,
            url: res[0]
          }
          delete obj.blob
          childItem.echoFile.push(obj)
        }
      }
      this.uploadAnswer(childItem.topicType, childItem)
      this.recordedFilesUrls = []
      this.stopNavigator()
      childItem.showCameraDialog = false
    },
    getAuthorized(topicType, childItem) {
      // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {}
      }
      // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
      // 使用getUserMedia，因为它会覆盖现有的属性。
      // 这里，如果缺少getUserMedia属性，就添加它。
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = (constraints) => {
          // 首先获取现存的getUserMedia(如果存在)
          let getUserMedia =
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.getUserMedia
          // 有些浏览器不支持，会返回错误信息
          // 保持接口一致
          if (!getUserMedia) {
            return Promise.reject(
              new Error('getUserMedia is not implemented in this browser')
            )
          }
          // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
          return new Promise(function(resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject)
          })
        }
      }

      let constraints = {
        audio: true,
        video: {
          width: this.videoWidth,
          height: this.videoHeight,
          transform: 'scaleX(-1)'
        }
      }
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then((stream) => {
          childItem.showDialogState = false
          childItem.showCameraDialog = true
          this.$nextTick(() => {
            this.thisCancas = document.getElementById('canvasCamera')
            this.thisContext = this.thisCancas.getContext('2d')
            this.thisVideo = document.getElementById('videoCamera')

            this.thisVideo.srcObject = stream // 直接使用 srcObject 分配媒体流
            this.setupMediaRecorder()
            this.thisVideo.onloadedmetadata = () => {
              this.thisVideo.play()
            }
          })
        })
        .catch((err) => {
          if (err.toString().indexOf('Could not start video source') > 0) {
            this.$modal.msgError('请检查设备是否有摄像头并且已打开')
          }
          if (err.toString().indexOf('Permission denied') > 0) {
            this.$modal.msgError('请授权浏览器访问摄像头和音频的权限')
          }
          console.log(err)
        })
    },
    //  绘制图片（拍照功能）
    async setImage(childItem) {
      if (childItem.echoFile.length + this.recordedFilesUrls.length > 9) {
        this.$modal.msgWarning('上传文件个数最多为10个！')
        return
      }
      // 点击，canvas画图
      this.thisContext.drawImage(
        this.thisVideo,
        0,
        0,
        this.videoWidth,
        this.videoHeight
      )
      // 获取图片base64链接
      let image = this.thisCancas.toDataURL('image/png')

      let obj = {
        type: 1,
        name: `camera-img${this.recordedFilesUrls.length}`,
        url: image
      }
      this.recordedFilesUrls.push(obj)
    },
    // 关闭摄像头
    stopNavigator() {
      this.thisVideo.srcObject.getTracks()[0].stop()
    },
    // 设置视频录制
    setupMediaRecorder() {
      const stream = this.thisVideo.srcObject
      this.mediaRecorder = new MediaRecorder(stream)
      this.mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          this.recordedChunks.push(event.data)
        }
      }
    },
    // 开始录制
    startRecording(childItem) {
      if (childItem.echoFile.length + this.recordedFilesUrls.length > 9) {
        this.$modal.msgWarning('上传文件个数最多为10个！')
        return
      }
      this.showrecordedTime = true
      // 设置倒计时时长（以秒为单位）
      let countdownDuration = 29
      // 开始倒计时
      this.countdownInterval = setInterval(() => {
        // 计算剩余时间（以分钟和秒钟为单位）
        let minutes = Math.floor(countdownDuration / 60)
        let seconds = countdownDuration % 60
        // 格式化剩余时间
        // 更新倒计时显示
        this.countdownElement = ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2)
        // 减少剩余时间
        countdownDuration--
        console.log(countdownDuration, 'countdownDuration')
        // 当倒计时结束时，清除倒计时间隔
        if (countdownDuration < 0) {
          clearInterval(this.countdownInterval)
          this.countdownElement = '00:00' // 倒计时结束时的显示
          this.stopRecording()
        }
      }, 1000)
      this.actRecordVideo = true
      this.recordedChunks = []
      this.mediaRecorder.start()
    },
    // 停止录制
    stopRecording() {
      this.actRecordVideo = false
      this.showVideoSwitch = false
      this.mediaRecorder.stop()
      this.mediaRecorder.onstop = () => {
        const blob = new Blob(this.recordedChunks, { type: 'video/webm' })

        let url = URL.createObjectURL(blob)
        //type==1  图片类型文件，type==2视频类型文件
        let obj = {
          type: 2,
          blob: blob,
          name: `recorded-video${this.recordedFilesUrls.length}.webm`,
          url: url
        }
        this.recordedFilesUrls.push(obj)
        this.showrecordedTime = false
        if (this.countdownInterval) {
          this.countdownElement = '00:30'
          clearInterval(this.countdownInterval)
        }
      }
    },
    delRecordedFile(index) {
      this.recordedFilesUrls.splice(index, 1)
    },

    delImg(index, topicType, childItem) {
      childItem.echoFile.splice(index, 1)
      this.uploadAnswer(topicType, childItem)
    },
    showDialog(childItem) {
      childItem.showDialogState = true
    },
    trimAnswer(item) {
      item = item.trim()
    },
    updateTimeDiff(endtime) {
      const diffInSeconds = (new Date(endtime) - new Date()) / 1000
      if (diffInSeconds > 0) {
        let timeStr = diffInSeconds + ''
        if (timeStr.slice(0, timeStr.indexOf('.')) == 300) {
          if (this.num > 0) {
            return
          }
          this.num++
          this.$message({
            showClose: true,
            message: '请注意答题时间，还有5min将自动提交试卷~',
            type: 'warning',
            duration: 5000
          })
        }
        const minutes = Math.floor(diffInSeconds / 60)
        const seconds = Math.floor(diffInSeconds % 60)
        this.timeDiff = `${minutes.toString().padStart(2, '0')}:${seconds
          .toString()
          .padStart(2, '0')}`
      } else {
        clearInterval(this.timerDiff)
        this.timeDiff = '00:00'
        // 如果页面再次刷新 进行判断是否考试过了
        if (
          this.formatObj.passing !== -1 &&
          this.formatObj.passing !== 1 &&
          !this.formatObj.finishTime
        ) {
          this.finishAnswer()
        }
      }
    },
    lookFiles(url, name) {
      let uploadType = url
        .slice(url.lastIndexOf('.'), url.length)
        .toLowerCase()
      let arr = [
        '.gif',
        '.png',
        '.jpeg',
        '.jpg',
        '.mp4',
        '.webm',
        '.pdf',
        '.wps',
        '.docx',
        '.doc',
        '.rtf',
        '.pptx',
        '.ppt',
        '.xls',
        '.xlsx',
        '.wps',
        '.ofd',
        '.txt',
        '.js',
        '.json',
        '.css',
        '.sql',
        '.xml',
        '.java',
        '.cs(c#)'
      ]
      if (arr.indexOf(uploadType) > -1) {
        this.drawer = true
        this.drawerurl = url
        this.drawername = name
        this.drawertype = 1
      } else {
        window.open(url, '_blank')
      }
    },
    //锚点跳转
    scrollToAnchor(item, type) {
      if (type == 1) {
        const anchor = document.getElementById(item.titleId)
        if (anchor) {
          anchor.scrollIntoView({ behavior: 'smooth' })
        }
      } else {
        console.log(111, item.id)
        const anchor = document.getElementById(item.id)
        if (anchor) {
          anchor.scrollIntoView({ behavior: 'smooth' })
        }
      }
    },
    //上传视频||图片
    uploadFiles(e, topicType, childItem) {
      childItem.echoFile = e
      console.log(e, 'e')
      console.log(childItem.echoFile, 'e')
      console.log(topicType, childItem, 'e')
      this.$forceUpdate()
      this.uploadAnswer(topicType, childItem)
    },
    //统计已做的题目
    calculation(val) {
      console.log(val, 'valval')
      for (const examPaperElement of this.formatObj.examPaperTitleList) {
        if (examPaperElement.titleId == val[0].bigTitleId) {
          console.log(
            examPaperElement.titleId,
            val[0].bigTitleId,
            'val[0].bigTitleId'
          )
          for (let i = 0; i < examPaperElement.topicList.length; i++) {
            if (examPaperElement.topicList[i].id == val[0].id) {
              console.log(val[0])
              examPaperElement.topicList[i] = val[0]
            }
          }
        }
      }
      let finishedNum = 0
      //遍历各个大题里的小题  通过答案值来统计已经做了多少题目
      for (const examArrElementElement of this.tidyData) {
        //判断 是否有题目 topicContent!=''
        if (examArrElementElement.topicContent) {
          //判断类型   填空题examArrElementElement.topicType==3 需要 multiAnswers数组长度 == optionCount 且内容不能为''
          if (examArrElementElement.topicType == 3) {
            if (
              examArrElementElement.multiAnswers.length ==
              examArrElementElement.optionCount
            ) {
              if (!examArrElementElement.multiAnswers.includes('')) {
                finishedNum++
              }
            }
          } else if (examArrElementElement.topicType == 1) {
            //判断类型   多选题examArrElementElement.topicType==1 需要 multiAnswers数组长度>0
            if (examArrElementElement.multiAnswers.length > 0) {
              finishedNum++
            }
          } else if ([4, 5].includes(examArrElementElement.topicType)) {
            //判断类型  简答题或者操作题，有附件或者回答就算完成答题
            if (
              examArrElementElement.userAnswer ||
              examArrElementElement.echoFile.length > 0
            ) {
              finishedNum++
            }
          } else {
            //判断类型   其他类型只需要判断 userAnswer有值就行
            if (examArrElementElement.userAnswer) {
              finishedNum++
            }
          }
        }
      }
      this.finishedNum = finishedNum
      this.percentage = (finishedNum / this.examTotal) * 100
    },
    //格式化数据
    formatDataInfo() {
      let examInfo = this.examInfo
      let examArr = examInfo.examPaperTitleList

      let formatArr = []
      //试题总数
      let examTotal = 0
      //遍历各个大题
      for (const examArrElement of examArr) {
        //计算试题总数
        examTotal += examArrElement.topicNum
        //格式化题目数组新增两个键值对  userAnswer用于存放单选题答案   multiAnswers用于存放多选题答案（以及填空题）
        //遍历各个大题里的小题
        let topicList = []
        for (const examArrElementElement of examArrElement.topicList) {
          let obj
          //判断作答的题目有没有缓存
          if (examArrElementElement.topicAnswer) {
            obj = {
              //原来的数据不动，新增两个字段用与存放答案
              ...examArrElementElement,
              userAnswer: examArrElementElement.topicAnswer.answer,
              multiAnswers: examArrElementElement.topicAnswer.multiAnswers
                ? examArrElementElement.topicAnswer.multiAnswers
                : [],
              echoFile: [],
              settlePic: [],
              showDialogState: false,
              showCameraDialog: false
            }
            if (examArrElementElement.settlePic) {
              obj.settlePic = examArrElementElement.settlePic.split(',')
            }
            if (examArrElementElement.topicAnswer.fileInfo) {
              let fileInfoArr = JSON.parse(
                examArrElementElement.topicAnswer.fileInfo
              )
              for (const fileInfoArrElement of fileInfoArr) {
                if (fileInfoArrElement.url) {
                  fileInfoArrElement.type = returnType(fileInfoArrElement.url)
                  fileInfoArrElement.name = returnName(fileInfoArrElement.url)
                }
              }
              obj.echoFile = fileInfoArr
            }
          } else {
            obj = {
              //原来的数据不动，新增两个字段用与存放答案
              ...examArrElementElement,
              userAnswer: '',
              multiAnswers: [],
              echoFile: [],
              settlePic: [],
              showDialogState: false,
              showCameraDialog: false
            }
            if (examArrElementElement.settlePic) {
              obj.settlePic = examArrElementElement.settlePic.split(',')
            }
          }
          topicList.push(obj)
        }
        let object = {
          ...examArrElement,
          topicList: topicList
        }
        formatArr.push(object)
      }
      let formatObj = {
        ...examInfo,
        examPaperTitleList: formatArr
      }
      if (
        formatObj.passing == 1 ||
        formatObj.passing == -1 ||
        formatObj.passing == 3
      ) {
        formatObj.finishTime = true
      }
      this.formatObj = formatObj
      this.examTotal = examTotal
      if (!this.formatObj.finishTime) {
        this.tidyUpData()
      }
    },
    uploadAnswer(topicType, item) {
      let ccExamPaperTopicAnswerReq
      //多选题
      if (topicType == 1) {
        let arr = item.multiAnswers
        if (arr.length == 0) {
          return
        }
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.multiAnswers.join(',').trim()
        }
      } else if (topicType == 3) {
        //填空题
        let arr = item.multiAnswers
        if (arr.length == 0) {
          return
        }
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.multiAnswers.join(',').trim()
        }
      } else if (topicType == 4) {
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.userAnswer.trim(),
          fileInfo:
            item.echoFile.length > 0 ? JSON.stringify(item.echoFile) : ''
        }
      } else if (topicType == 5) {
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.userAnswer.trim(),
          fileInfo:
            item.echoFile.length > 0 ? JSON.stringify(item.echoFile) : ''
        }
      } else {
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.userAnswer.trim()
        }
      }
      delete ccExamPaperTopicAnswerReq.right
      console.log('上传的文件', ccExamPaperTopicAnswerReq)
      this.$emit('submitSingleAnswer', ccExamPaperTopicAnswerReq)
    },
    submitAnswer() {
      this.$confirm(
        `${
          this.examTotal != this.finishedNum ? '还有题目未完成,' : ''
        }确定要提交吗？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.sureSubmitAnswer()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
            showClose: true
          })
        })
    },
    sureSubmitAnswer() {
      clearInterval(this.timerDiff)
      let id = this.formatObj.id ? this.formatObj.id : this.examInfo.id
      this.$emit('finshAnswerPaper', id)
    },
    finishAnswer() {
      if (this.isAction) {
        this.$message({
          showClose: true,
          message: '考试时间结束，已自动提交试卷~',
          type: 'warning'
        })

        // 如果页面再次刷新 进行判断是否考试过了
        if (this.formatObj.passing !== -1 && this.formatObj.passing !== 1) {
          clearInterval(this.timerDiff)
          let id = this.formatObj.id ? this.formatObj.id : this.examInfo.id
          this.$emit('finshAnswerPaper', id)
        }
      }
    },

    tidyUpData() {
      let arr = []
      for (const examPaperItem of this.formatObj.examPaperTitleList) {
        for (const topicItem of examPaperItem.topicList) {
          delete examPaperItem.sort
          let obj = {
            ...topicItem,
            title: examPaperItem.title,
            bigTitleId: examPaperItem.titleId,
            bigScore: examPaperItem.score,
            topicNum: examPaperItem.topicNum
          }
          arr.push(obj)
        }
      }
      this.tidyData = arr
      if (this.examTotal > 0) {
        this.handleExamData(this.topicIndex)
      }
    },
    jumpToDetail(item) {
      for (let i = 0; i < this.tidyData.length; i++) {
        if (item.id == this.tidyData[i].id) {
          this.topicIndex = i
        }
      }
      this.handleExamData(this.topicIndex)
    },

    //根据下标处理当前考试题目的数据
    handleExamData(topicIndex) {
      this.answerExamData = [this.tidyData[topicIndex]]
    },
    //上一题
    preQuestion() {
      if (this.topicIndex == 0) {
        return
      }
      this.topicIndex--
      this.handleExamData(this.topicIndex)
    },
    // 下一题
    nextQuestion() {
      if (this.topicIndex + 1 == this.tidyData.length) {
        return
      }
      this.topicIndex++
      this.handleExamData(this.topicIndex)
    },
    // 图片点击放大
    showImg(e) {
      if (e.target.tagName == 'IMG') {
        this.imgPreview.img = e.target.src
        this.imgPreview.show = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-button--primary.is-plain {
  background: #ffffff !important;
  color: #11a983 !important;
}

::v-deep .el-button--primary.is-plain:hover {
  background: #11a983 !important;
  color: #ffffff !important;
}

::v-deep i {
  font-style: normal !important;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;

  box-sizing: border-box;
  background: #f5f6f7;

  .exam_content {
    width: 1200px;
    border-radius: 16px;
    background: #ffffff;
    position: relative;

    .answer_sheet {
      width: 344px;
      box-shadow: 0 6px 14px 0 rgba(0, 55, 49, 0.1);
      border-radius: 0 16px 0 0;
      background: white;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;

      &_title {
        display: flex;
        justify-content: space-between;
        padding: 24px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #f2f3f4;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .sheet_question_list {
        height: 60vh;
        overflow: auto;
        padding: 32px 24px;
        box-sizing: border-box;
        background: white;

        .sheet_question_item {
          display: inline-block;
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          margin-bottom: 12px;
        }
      }

    }

    &_top {
      border-radius: 16px 16px 0 0;
      border-bottom: 1px solid #f1f3f3;
      padding: 24px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .el-icon-s-operation {
        font-size: 18px;
        color: #727272;
        cursor: pointer;
      }

      .middle {
        display: flex;
        align-items: center;

        .progress {
          width: 120px;
          margin-left: 16px;
        }
      }
    }

    .exam_list {
      width: 100%;
      padding: 32px 64px;
      background: white;
      box-sizing: border-box;

      .answer_question {
        font-size: 14px;
        font-weight: 400;
        color: #333333;

        .item_answer {
          width: 100%;
          margin: 21px 0 41px;

          .textarea {
            width: 60%;
            font-size: 16px;
          }

          .attachment {
            width: 100%;
            padding: 25px 0 0;
            box-sizing: border-box;
            display: flex;

            &_sugest {
              font-size: 14px;
              font-weight: 400;
              color: #999999;
              margin-top: 16px;
            }

            .pictures {
              margin-left: 10px;
            }
          }
        }

        .question_type {
          color: #ef7d00;
        }
      }
    }
  }

  .answer_content {
    width: 1200px;
    border-radius: 16px;
    background: #ffffff;
    position: relative;

    .answer_sheet {
      width: 344px;
      height: calc(100vh - 134px);
      box-shadow: 0 6px 14px 0 rgba(0, 55, 49, 0.1);
      border-radius: 0 16px 16px 0;
      background: white;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;

      &_title {
        display: flex;
        justify-content: space-between;
        padding: 28px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #f2f3f4;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .sheet_question_list {
        height: calc(100vh - 285px);
        overflow: auto;
        padding: 32px 24px;
        box-sizing: border-box;
        background: white;

        .sheet_question_item {
          display: inline-block;
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          margin-bottom: 12px;
        }
      }

      .operation_btn {
        width: 100px;
        height: 40px;
        position: absolute;
        right: 50%;
        bottom: 37px;
        transform: translateX(50%);
      }
    }

    &_top {
      border-radius: 16px 16px 0 0;
      border-bottom: 1px solid #f1f3f3;
      padding: 24px 460px 24px 24px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .el-icon-s-operation {
        font-size: 18px;
        color: #727272;
        cursor: pointer;
      }

      .middle {
        display: flex;
        align-items: center;

        .progress {
          width: 120px;
          margin-left: 16px;
        }
      }
    }

    .all_answer_connect {
      width: 850px;
      overflow: auto;

      .answer_list {
        width: 100%;
        padding: 32px 64px;
        background: white;
        box-sizing: border-box;

        .answer_question {
          font-size: 14px;
          font-weight: 400;
          color: #333333;

          .item_answer {
            width: 100%;
            margin: 21px 0 41px;

            .textarea {
              width: 60%;
              font-size: 16px;
            }

            .attachment {
              width: 100%;
              padding: 25px 0 0;
              box-sizing: border-box;
              display: flex;

              &_sugest {
                font-size: 14px;
                font-weight: 400;
                color: #999999;
                margin-top: 16px;
              }

              .pictures {
                margin-left: 10px;
              }
            }
          }

          .question_type {
            color: #ef7d00;
          }
        }
      }
    }

    /* 修改滚动条样式 .title_state为div盒子*/
    .all_exam_connect::-webkit-scrollbar {
      width: 6px;
      overflow-y: scroll;
      overflow-x: auto;
    }

    .all_exam_connect::-webkit-scrollbar-thumb {
      background: #e1e1e1;
      border-radius: 4px;
    }

    .all_exam_connect::-webkit-scrollbar-track {
      background: white;
    }

    .btns_operation {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 400px 32px 0;
      box-sizing: border-box;

      .operation_btn {
        width: 100px;
        height: 40px;
      }
    }
  }
}

.upload_btn {
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;
}

.el-icon-plus {
  font-size: 18px;
  font-weight: bold;
  color: #999999;
}

.upload_txt {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
}

.paperTitle {
  font-size: 14px;
  font-weight: 500;
  color: #949494;
}

.paperTitle_left {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 16px;
}

.mt_10 {
  margin-top: 20px;
}

.sheet_answer_collect {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 12px;

  &_item {
    cursor: pointer;
    user-select: none;
    margin: 0 10px 10px 0;
    width: 36px;
    height: 36px;
    background: #ffffff;
    color: #999999;
    border-radius: 50%;
    border: 1px solid #28b28b;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.optionItem {
  display: flex;
  align-items: center;
  margin: 10px 0;

  &_info {
    min-width: 160px;
    padding: 6px 10px;
    box-sizing: border-box;
    color: #a0a09f;;
    border-radius: 8px;
    background: #f5f7fa;
    border: 1px solid #e4e7ed;
    cursor: not-allowed;
  }

  &_label {
    font-size: 14px;
    font-weight: 400;
    color: #a0a09f;
  }

  &_answer {
    width: 256px;
    margin-left: 11px;
  }
}

.selected {
  background: #daf1ff;
  color: #03c4ff;
  border: 0;
}

.fail_select {
  background: #ffcfce;
  color: #e95756;
  border: 0;
}

.color_red {
  color: red;
}

.color_green {
  margin-right: 40px;
  color: #09c1ae !important;
  cursor: pointer;
}

.teacherRemark {
  display: flex;

  .label {
  }

  .color_gary {
    color: #999999;
    word-wrap: break-word; /* 当单词超出容器宽度时自动换行 */
  }
}

.color_aqua {
  color: #09c1ae !important;
  cursor: pointer;
}

.submited_state_top {
  border-radius: 16px 16px 0 0;
  padding: 16px 0;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .submited_img {
    width: 32px;
    height: 32px;
    object-fit: cover;
  }

  .submited_text {
    font-size: 18px;
    font-weight: 600;
    margin-left: 20px;
  }
}

.state_color_green {
  color: #28b28b;
}

.state_color_red {
  color: #d81e06;
}

.state_color_light_green {
  color: #19b300;
}

.bg_color_green {
  background: #cdf2ef;
}

.bg_color_red {
  background: #fbdddd;
}

.bg_color_light_green {
  background: #d2f2cd;
}

::v-deep .makeup_examination {
  width: 112px;
  height: 32px;
  background: #e95756 !important;
  border-radius: 20px !important;
  line-height: 12px;
  color: #ffffff;
}

::v-deep .el-statistic .con .number {
  font-size: 16px;
  margin-left: -14px;
}

.makeup_examination {
  position: absolute;
  right: 116px;
}

//checkBox自定义禁用样式
//::v-deep .el-checkbox__input.is-disabled + .el-checkbox__label {
//  color: #808080 !important;
//}
//
//::v-deep .el-checkbox__input.is-disabled.is-checked + .el-checkbox__label {
//  color: #1890ff !important;
//}
//
//::v-deep .el-checkbox__input .is-disabled .el-checkbox__inner {
//  background-color: #1890ff !important;
//  border-color: #1890ff !important;
//}
.el-icon-warning {
  color: #faad14;
  font-size: 24px;
  margin-right: 8px;
}

.toptip {
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
}

.fail_answered {
  font-size: 14px;
  font-weight: 400;
  color: #e95756;
}

.right_answered {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 400;
}

.color_black {
  color: #333333;
  margin-left: 40px;
}

.view_img {
  width: auto !important;
  height: 90px;
  margin-left: 12px;
  margin-bottom: 12px;
  position: relative;
}

.view_img_url {
  width: auto !important;
  height: 100%;
}

.video_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;
}

.other_box {
  width: 90px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;

  .el-icon-document {
    font-size: 18px;
    color: #565656;
  }

  .other_text {
    margin-top: 10px;
    font-size: 12px;
    color: #565656;
    display: flex;
    align-items: center;

    span {
      display: inline-block;
      width: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.video_img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  position: absolute;
}

.teacher_approval {
  display: flex;
  align-items: center;
}

.approval_radio {
  margin-top: 4px;
}

.remake {
  width: 100px;
}

.scoreget_label {
  margin: 0 6px 0 20px;
}

.teacher_approval_all {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.teacher_approval_remoke {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.remake_approval {
  width: 25%;
  font-size: 16px;
}

.resolve_exam {
  display: flex;
  margin-top: 10px;

  &_label {
    color: #333333;
    font-weight: bold;
  }

  &_value {
    color: #333333;
  }
}

.bg_orange {
  width: 100px;
  height: 32px;
  background: #fef4e9;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 16px;

  .countdown_img {
    width: 24px;
    height: 24px;
    object-fit: cover;
  }

  .countdown_txt {
    font-size: 14px;
    font-weight: 400;
    color: #ef7d00;
  }
}

/* 修改滚动条样式 .title_state为div盒子*/
.sheet_question_list::-webkit-scrollbar {
  width: 4px;
  overflow-y: scroll;
  overflow-x: auto;
}

.sheet_question_list::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border-radius: 4px;
}

.sheet_question_list::-webkit-scrollbar-track {
  background: white;
}

/* 修改滚动条样式 .title_state为div盒子*/
.all_exam_connect::-webkit-scrollbar {
  width: 6px;
  overflow-y: scroll;
  overflow-x: auto;
}

.all_exam_connect::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border-radius: 4px;
}

.all_exam_connect::-webkit-scrollbar-track {
  background: white;
}

.all_exam_connect {
  width: 100%;
  overflow: auto;
}

.topic_image {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
}

.upload_new {
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;
  margin-right: 12px;

  .el-icon-plus {
    font-size: 18px;
    font-weight: bold;
    color: #999999;
  }

  .upload_txt {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    user-select: none;
  }
}

.upload_way {
  width: 100%;
  padding: 56px 100px 78px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &_left {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
    align-items: center;

    .local_icon {
      width: 40px;
      height: 40px;
      background-image: url("./image/local_icon.png");
      background-repeat: no-repeat;
      background-position: 100% 100%;
    }

    .local_txt {
      width: 56px;
      height: 14px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      margin-top: 24px;
    }
  }

  &_left:hover {
    .local_icon {
      background-image: url("./image/local_hover_icon.png");
    }

    .local_txt {
      color: #28b28b;
    }

    &_right {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  &_right {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
    align-items: center;

    .local_icon {
      width: 40px;
      height: 40px;
      background-image: url("./image/camera_icon.png");
      background-repeat: no-repeat;
      background-position: 100% 100%;
    }

    .local_txt {
      width: 56px;
      height: 14px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      margin-top: 24px;
    }
  }

  &_right:hover {
    .local_icon {
      background-image: url("./image/camera_hover_icon.png");
    }

    .local_txt {
      color: #28b28b;
    }

    &_right {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

.add_class {
  width: 680px;
  display: flex;
  flex-wrap: wrap;

  .view_img_local {
    width: auto;
    height: 90px;
    margin: 0 12px 12px 0;
    position: relative;
  }

  .local_img_url {
    width: auto;
    height: 100%;
  }

  .local_video_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    cursor: pointer;

    .video_img {
      width: 24px;
      height: 24px;
      object-fit: cover;
      position: absolute;
    }
  }

  .local_other_box {
    width: 90px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    cursor: pointer;

    .el-icon-document {
      font-size: 18px;
      color: #565656;
    }

    .other_text {
      margin-top: 10px;
      font-size: 12px;
      color: #565656;
      display: flex;
      align-items: center;

      span {
        display: inline-block;
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .close_img {
    width: 16px;
    height: 16px;
    position: absolute;
    top: -4px;
    right: -4px;
    cursor: pointer;
  }
}

.photo_way {
  width: 100%;
  display: flex;

  &_left {
    width: 640px;
  }

  &_right {
    width: 302px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-left: 22px;

    .view_img_local {
      width: 80px;
      height: 45px;
      margin: 0 0 14px 20px;
      position: relative;
    }

    .local_img_url {
      width: 100%;
      height: 100%;
    }

    .recorded_video_box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f5f5f5;
      cursor: pointer;

      .video_img {
        width: 24px;
        height: 24px;
        object-fit: cover;
        position: absolute;
      }
    }

    .close_img {
      width: 16px;
      height: 16px;
      position: absolute;
      top: -4px;
      right: -4px;
      cursor: pointer;
    }
  }
}

.camera_outer {
  position: relative;
  overflow: hidden;
  background-size: 100%;

  video,
  canvas {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
  }

  video {
    border: 1px solid #e2e2e2;
  }

  .photo_btns {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 16px;

    .camera_photo_icon {
      width: 40px;
      height: 40px;
      cursor: pointer;
      user-select: none;
      background-image: url("./image/camera_icon.png");
    }

    .camera_photo_icon:hover {
      background-image: url("./image/camera_hover_icon.png");
    }

    .camera_shooting_icon {
      margin-left: 68px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      user-select: none;
      background-image: url("./image/camera_shooting_icon.png");
    }

    .video_recording_icon {
      width: 40px;
      height: 40px;
      cursor: pointer;
      user-select: none;
      background-image: url("./image/video_recording_icon.png");
    }

    .video_recording_hover_icon {
      width: 40px;
      height: 40px;
      cursor: pointer;
      user-select: none;
      background-image: url("./image/video_recording_hover_icon.png");
    }

    .camera_shooting_icon:hover {
      background-image: url("./image/camera_shooting_hover_icon.png");
    }
  }
}

::v-deep .recordedVideo::-webkit-media-controls {
  transform: scaleX(-1); /* 在 WebKit 浏览器中翻转控制条 */
}

::v-deep .recordedVideo::-moz-media-controls {
  transform: scaleX(-1); /* 在 Firefox 浏览器中翻转控制条 */
}

::v-deep .recordedVideo::-ms-media-controls {
  transform: scaleX(-1); /* 在 Edge 浏览器中翻转控制条 */
}

.ml_0 {
  margin-left: 0 !important;
}

::v-deep p {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

::v-deep p > img {
  margin: 0 15px;
}

//富文本图片放大
.imgDolg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  background-color: rgba(140, 134, 134, 0.6);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  #imgDolgClose {
    position: fixed;
    top: 35px;
    cursor: pointer;
    right: 7%;
    font-size: 50px;
    color: white;
  }

  .img {
    width: 70%;
    max-height: 90%;
  }
}

.img-hidden {
  width: 0 !important;
  height: 0 !important;
  // visibility:hidden;
}

.others_content {
  width: 88%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: auto;
  margin: 0 auto 50px;

  .title {
    font-size: 16px;
    color: #333333;
    margin-bottom: 20px;
  }

  &_item {
    width: 100%;
    padding: 16px 32px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #ebebeb;
    margin-bottom: 20px;

    .title {
      font-size: 16px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
    }

    .param_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .param_item {
        flex: 0.5;
        margin: 10px 0 0;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333333;

        span {
          margin-right: 4px;
        }
      }
    }
  }
}

.textarea_info {
  min-width: 160px;
  max-width: 800px;
  padding: 6px 10px;
  box-sizing: border-box;
  color: #a0a09f;;
  border-radius: 8px;
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  cursor: not-allowed;
}

.questionTitle {
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 100%;
}
</style>
